// import * as axios from './lib/axios.js'
console.log(axios) 
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
//获取省市区
let form = document.querySelector('.update-form')
    let provinceSelect = document.querySelector('[name=province]')
    let citySelect = document.querySelector('[name=city]')
    let areaSelect = document.querySelector('[name=area]')

    async function render() {
      let { data: { data: { province, city, area } } } = await axios.get('/api/settings')
        //先从数据库中获取中国所有省市的信息再显示到文本框中
        //省
        let { data } = await axios.get('/api/province')
        console.log(data)
        provinceSelect.innerHTML = `<option value="">--省--</option>${data.map(item => `<option value=${item}>${item}</option>`).join('')}`
       
        //市
        let { data: { data: citydata } } = await axios.get('/api/city', { params: { pname: province } })
        citySelect.innerHTML = `<option value="">--市--</option>${citydata.map(item => `<option value=${item}>${item}</option>`).join('')}`
        
        //区
        let { data: { data: areadata } } = await axios.get('/api/area', { params: { pname: province, cname: city } })
        areaSelect.innerHTML = `<option value="">区</option>${areadata.map(item => `<option value=${item}>${item}</option>`).join('')}`
        
      }
      render()
      // ========================================= 省市切换功能 =========================================
      // 省切换
      provinceSelect.addEventListener('change', async function () {
        let { data: { data: citydata } } = await axios.get('/api/city', { params: { pname: provinceSelect.value } })
        citySelect.innerHTML = `<option value="">--市--</option>${citydata.map(item => `<option value=${item}>${item}</option>`).join('')}`
        areaSelect.innerHTML = `<option value="">区</option>`
      })
      // 市切换
      citySelect.addEventListener('change', async function () {
        let { data: { data: areadata } } = await axios.get('/api/area', { params: { pname: provinceSelect.value, cname: citySelect.value } })
        areaSelect.innerHTML = `<option value="">区</option>${areadata.map(item => `<option value=${item}>${item}</option>`).join('')}`
      })
